<template>
  <div class="pc-blockdetail inner-box">
    <bread
      :backTitle="$t('block.title')"
      backRouter="/block"
      :secTitle="$t('components.blockDetail')"
    ></bread>
    <div class="title">
      <h1>
        <i class="iconfont iconqukuaixiangqinglogo"></i>
        <span>{{$t('blockDetail.title')}}&nbsp;&nbsp;{{block.height}}</span>
      </h1>
      <p class="hash">{{$t('block.hash')}}&nbsp;&nbsp;{{block.hash}}</p>
      <div
        class="copy-btn"
        v-clipboard:copy="block.hash"
        v-clipboard:success="success"
        v-clipboard:error="error"
      >{{$t('components.copy')}}</div>
    </div>
    <!-- 区块信息 -->
    <block-info :infos="block"></block-info>
    <!-- 交易记录 -->
    <div class="tx-record table-shadow">
      <h2>{{$t('blockDetail.record')}}</h2>
      <!-- 表格部分 -->
      <el-table
        :data="Trades"
        stripe
        style="width: 100%"
        class="data-table"
        :cell-class-name="groupCellName"
      >
        <template slot="empty">
          <div>
            <div
              v-if="Loading"
              class="loading-line"
              v-loading="Loading"
              element-loading-text="Loading..."
              element-loading-spinner="el-icon-loading"
            ></div>
            <span v-else>{{$t('page.nodata')}}</span>
          </div>
        </template>
        <el-table-column label width="20">
          <template slot-scope="item">
            <div>
              <div
                :class="{'start-line':item.row.tradeG===2,'middle-line':item.row.tradeG===1,'end-line':item.row.tradeG===3}"
              >
                <span v-if="item.row.tradeG!==3"></span>
                <i></i>
                <span v-if="item.row.tradeG===3"></span>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column :label="$t('trade.hash')">
          <template slot-scope="item">
            <div>
              <p class="group-title" v-if="item.row.tradeG===2">{{$t('txDetail.groupTx')}}</p>
              <router-link :to="`/tradeHash?hash=${item.row.txHash}`" class="light flex-left">
                <i
                  class="iconfont err-ico"
                  :class="{'iconjinggao-chucuo':isSuccess(item.row.tx.execer,item.row.receipt.ty)}"
                ></i>
                {{item.row.txHash|filterHash(10)}}
              </router-link>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="hash" :label="$t('home.sender')">
          <template slot-scope="item">
            <router-link
              :to="`/address?address=${item.row.fromAddr}`"
              class="light"
            >{{item.row.fromAddr|filterHash(10)}}</router-link>
          </template>
        </el-table-column>
        <el-table-column width="60">
          <template slot-scope="item">
            <i class="iconfont iconjiantou-you"></i>
          </template>
        </el-table-column>
        <el-table-column prop="hash" :label="$t('home.receiver')">
          <template slot-scope="item">
            <router-link
              :to="`/address?address=${item.row.tx.to}`"
              class="light"
            >{{item.row.tx.to|filterHash(10)}}</router-link>
          </template>
        </el-table-column>
        <el-table-column prop="fee" :label="$t('trade.num')">
          <template slot-scope="item">{{item.row|TradeValue}}</template>
        </el-table-column>
        <el-table-column :label="$t('trade.fee')" width="120">
          <template slot-scope="item">{{item.row.fee}}{{item.row.tx.fee|filterFee}}</template>
        </el-table-column>
        <el-table-column :label="$t('trade.func')" width="120">
          <template
            slot-scope="item"
          >{{item.row.actionName === 'unknown'? 'none':item.row.actionName}}</template>
        </el-table-column>
        <el-table-column :label="$t('trade.token')" width="100" align="center">
          <template slot-scope="item">
            <img :src="item.row.icon" class="token-icon" />
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 底部分页 -->
    <div class="bottom-page flex-right">
      <page-container
        @pageChange="pageChange"
        @sizeChange="sizeChange"
        :currentPage="pages.currentPage"
        :pageSize="pages.pageSize"
        :total="pages.total"
      ></page-container>
    </div>
  </div>
</template>

<script>
import Bread from "@/components/computer/Breadcrumb.vue";
import BlockInfo from "./BlockInfos";
import PageContainer from "@/components/computer/PageContainer.vue";
import BlockDetail from "@/mixins/BlockDetail/blockdetail.js";
import { tradeAccuracy } from "../../../utils/common";
export default {
  mixins: [BlockDetail],
  components: {
    Bread,
    BlockInfo,
    PageContainer
  },
  methods: {
    isSuccess(execer, ty) {
      return tradeAccuracy(execer, ty);
    }
  }
};
</script>

<style lang="scss">
.pc-blockdetail {
  .title {
    margin: 28px 0 20px;
    .iconqukuaixiangqinglogo {
      color: $blue;
      font-size: 20px;
    }
    span {
      margin-left: 10px;
      color: $black;
      font-size: 20px;
      font-family: PingFangSC-Semibold;
      font-weight: 500;
    }
    .hash {
      display: inline-block;
      margin-top: 6px;
      padding-left: 30px;
      font-size: 14px;
      color: $black;
    }
  }
  .tx-record {
    margin-top: 30px;
    border: 1px solid #ebeff1;
    .err-ico {
      color: #e45359;
      font-size: 12px;
      width: 13px;
      margin-right: 5px;
      display: inline-flex;
    }
    h2 {
      height: 81px;
      line-height: 81px;
      padding-left: 25px;
      font-size: 16px;
      color: $black;
      font-family: PingFangSC-Semibold;
      font-weight: 500;
      background: $white;
      border-bottom: 1px solid #ececec;
    }
    .data-table {
      .el-table__header thead tr {
        height: 60px;
      }
      .iconjiantou-you {
        font-size: 20px;
        color: #9aaab9;
      }
      .tx-start,
      .tx-middle,
      .tx-end {
        background: $group_bg;
        .light,
        .iconjiantou-you {
          color: $group_title;
        }
      }
      .tx-start {
        padding-top: 45px;
      }
      .tx-start:nth-of-type(2) {
        padding-top: 0;
        // .cell {
        //   padding: 0;
        // }
      }
      .tx-start:nth-of-type(1),
      .tx-middle:nth-of-type(1),
      .tx-end:nth-of-type(1) {
        padding: 0;
        text-align: right;
        span {
          background: $group_title;
          width: 5px;
          height: 5px;
          border-radius: 50%;
          display: block;
        }
        i {
          margin: 0 auto;
          display: block;
          width: 1px;
          background: $group_title;
        }
        .start-line {
          position: absolute;
          bottom: 0;
          width: 5px;
          span {
            margin: 0 auto;
          }
          i {
            height: 27.5px;
          }
        }
        .middle-line {
          width: 5px;
          span {
            position: absolute;
            top: 45%;
          }
          i {
            height: 67px;
          }
        }
        .end-line {
          position: absolute;
          top: 0;
          width: 5px;
          span {
            margin: 0 auto;
          }
          i {
            height: 27.5px;
          }
        }
      }
      .group-title {
        margin: 15px 0 9px 20px;
        font-size: 14px;
        font-family: PingFangSC-Semibold;
        font-weight: 500;
        color: $group_title;
      }
    }
    .token-icon {
      height: 26px;
    }
  }
  .bottom-page {
    margin-top: 23px;
  }
  .loading-line {
    height: 60px;
    line-height: 18px;
  }
  .el-table tr,
  .el-table td {
    border: 0;
  }
  .el-table th:nth-of-type(2) .cell {
    padding-left: 30px;
  }
}
</style>